import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image, Dimensions } from 'react-native';
import ListItems from '@/components/ListTimes';
import axios from 'axios';
import Swiper from 'react-native-swiper'


export default function Qianb() {
    let [list, setList] = useState([]);

    useEffect(() => {
        getList();
    }, []);

    let getList = async () => {
        let { data: { data } } = await axios.get('http://localhost:3000/getList');
        setList(data);
    };



    return (
        <ScrollView
            style={styles.Qianb}
            name="lazyload-list"
        >
            <Text style={styles.Qianb_header}>
                钱包
            </Text>
            <View>
                <Text style={styles.Qianb_content_leftText}>你的余额</Text>
                <Text style={styles.Qianb_content_leftSpan}>￥20,00.12</Text>
                <Image
                    source={require('@/assets/images/Frame.png')}
                    style={styles.Qianb_content_right}
                />
            </View>

            <View
                style={styles.Qianb_content_rightImg}
            >
                <Swiper
                    style={styles.Qianb_Carouselimage}
                    // showsButtons={true}
                    autoplay={true}
                >
                    <Image
                        source={{ uri: 'https://iili.io/2liqLhv.png' }}
                        style={styles.Qianb_Pointsbelowthecarousel}
                    />
                    <Image
                        source={{ uri: 'https://iili.io/2EpwmKB.jpg' }}
                        style={styles.Qianb_Pointsbelowthecarousel}
                    />
                    <Image
                        source={{ uri: 'https://iili.io/2jdHzCX.jpg' }}
                        style={styles.Qianb_Pointsbelowthecarousel}
                    />
                </Swiper>
            </View>

            <View>
                <Text style={styles.Qianb_content_topleft}>最近交易</Text>
                <Image
                    source={require('@/assets/images/Frame162857State.png')}
                    style={styles.Qianb_content_topright}
                />
            </View>
            <ScrollView style={styles.Qianb_listTime}>
                {list.map((item: Object, index: number) => (
                    <ListItems
                        name={item.name}
                        img={item.img}
                        time="2024-12-18"
                        symbol={item.symbol}
                        price={item.price}
                        key={item._id}
                    />
                ))}

            </ScrollView>
            <View style={{ width: w(390), height: h(100) }}></View>
        </ScrollView>
    );
}


const { width, height } = Dimensions.get('window');
const widthPx = 390;
const heightPx = 844;
const w = (value: number) => {
    return (value * width) / widthPx;
};
const h = (value: number) => {
    return (value * height) / heightPx;
};

const styles = StyleSheet.create({
    Qianb: {
        left: 0,
        top: 0,
        width: w(390),
        height: h(868),
        backgroundColor: 'rgba(255, 255, 255, 1)',
    },
    Qianb_header: {
        left: w(182),
        top: h(40),
        width: w(40),
        height: h(25),
        lineHeight: h(1.56),
        color: 'rgba(0, 0, 0, 1)',
        fontSize: w(1.25 * 16),
    },
    Qianb_content_leftText: {
        left: w(24),
        top: h(80),
        width: w(52),
        height: h(18),
        lineHeight: h(1.13),
        color: 'rgba(156, 163, 175, 1)',
        fontSize: w(0.81 * 16),
        textAlign: 'left',
        fontFamily: 'PingFangSC-medium'

    },
    Qianb_content_leftSpan: {
        left: w(24),
        top: h(90),
        width: w(120),
        height: h(28),
        lineHeight: h(1.75),
        color: 'rgba(55, 65, 81, 1)',
        fontSize: w(1.38 * 16),
        textAlign: 'left',
        fontFamily: 'PingFangSC-regular',
        fontWeight: 'bold'
    },
    Qianb_content_right: {
        left: w(328),
        top: h(25),
        width: w(50),
        height: h(50),
    },
    Qianb_content_rightImg: {
        left: w(18),
    },
    Qianb_Carouselimage: {
        left: w(0),
        top: h(60),
        width: w(358),
        height: h(245),
        // backgroundColor: 'rgba(255, 255, 255, 1)',
        backgroundColor: 'red',
    },
    Qianb_Pointsbelowthecarousel: {
        // left: w(180),
        // top: h(90),
        // width: w(358),
        // height: h(245)
        width: '92%',
        height: '100%'
    },
    Qianb_content_topleft: {
        left: w(24),
        top: h(60),
        width: w(68),
        height: h(22),
        lineHeight: h(1.38),
        color: 'rgba(55, 65, 81, 1)',
        fontSize: w(1.06 * 16),
        textAlign: 'left',
        fontFamily: 'PingFangSC-regular',
        fontWeight: 'bold'
    },
    Qianb_content_topright: {
        left: w(340),
        top: h(20),
        width: w(38),
        height: h(38),
    },
    Qianb_listTime: {
        left: w(24),
        top: h(55),
        width: w(350),
    },
    Qianb_Img: {
        width: '100%',
        height: h(245),
    }
});